<template>
    <div style="min-height: 30vh;background: white;" ref="comment"><!--我的证书-->
        <div class="list-box" v-if="!show">
            <div class="item-box" @click="toPreview(item)" v-for="(item, index) in certificateList" :key="index">
                <span>{{ item.cfcTitle || '--' }}</span>
                <van-icon name="arrow" color="#8A8A8A"/>
            </div>
        </div>
        <common-loading :isLoading="isLoading"></common-loading>
    </div>
</template>

<script>
import { Popup, ImagePreview } from 'vant';
import CommonLoading from '@/components/common/loading';
export default {
    name: 'MyCertificate',
    components: {Popup, ImagePreview, CommonLoading},
    data() {
        return {
            id: this.$route.query.id,
            certificateList: [],
            contentHtml: '',
            show: false,
            isLoading: false
        };
    },
    props: [],
    methods: {
        getFreshDetail() {
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/cert/list`,
                params: {
                    itmId: this.$route.query.id
                }
            }).then((res) => {
                this.certificateList = res.data;
            });
        },
        toPreview(item) {
            this.$router.push('/myCertificate/preview/' + item.itmId + '/' + item.acType + '/' + item.cfcId);
        }
    },
    mounted() {
        this.getFreshDetail();
    },
    watch: {
    }
};
</script>

<style scoped lang="less">
.list-box{
    background: #fff;
    padding: 0 20px;
    margin-top: 10px;
    .item-box{
        border-bottom: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 0;
    }
}
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
</style>
